<template>
  <view class="feedback-page">
    <!-- 问题与意见 -->
    <view class="section">
      <view class="section-title">问题与意见</view>
      <view class="section-title" @click="toggleCommonProblems">
        <view class="section-header">
          <view v-if="selectedProblems.length > 0" class="selected-problems">
            <view v-for="(problem, index) in selectedProblems" :key="index" class="problem-tag">
              {{ problem }}
              <view class="close-icon" @click.stop="removeProblem(index)">
                <uni-icons type="close" size="12"></uni-icons>
              </view>
            </view>
          </view>
          <view v-else class="hint-tag">
            <uni-icons type="info" size="14" color="#999"></uni-icons>
            <text class="hint-text">点击选择问题类型（可多选）</text>
          </view>
        </view>
        <uni-icons :type="showCommonProblems ? 'arrowup' : 'arrowdown'" size="16" color="#999"></uni-icons>
      </view>
      <view v-if="showCommonProblems" class="common-problems">
        <view
          class="problem-item"
          v-for="(problem, index) in commonProblems"
          :key="index"
          @click="toggleProblem(problem)"
          :class="{ selected: isProblemSelected(problem) }"
        >
          {{ problem }}
          <uni-icons v-if="isProblemSelected(problem)" type="checkmark" size="16" color="#4CAF50"></uni-icons>
        </view>
      </view>
      
      <view class="custom-problem">
        <textarea
          class="input-textarea"
          placeholder="请详细描述您的问题或意见"
          v-model="customProblemText"
        ></textarea>
      </view>
    </view>

    <!-- 图片上传（已优化删除按钮） -->
    <view class="section">
      <view class="section-title">问题截图（选填）</view>
      <view class="image-upload">
        <view class="image-item" v-for="(image, index) in images" :key="index">
          <image :src="image" class="uploaded-image" mode="aspectFill"></image>
          <view class="delete-btn" @click.stop="removeImage(index)">
            <uni-icons type="close" size="16" color="#fff"></uni-icons>
          </view>
        </view>
        <view class="upload-btn" @click="chooseImage">
          <uni-icons type="plus" size="24" color="#999"></uni-icons>
          <text>上传图片</text>
        </view>
      </view>
    </view>

    <!-- 联系方式 -->
    <view class="section">
      <view class="section-title">联系方式（选填）</view>
      <input
              class="input-text"
              type="number"
              placeholder="请输入您的手机号"
              v-model="contactInfo"
              @blur="validatePhone"
            />
      <view v-if="phoneError" class="error-message">{{ phoneError }}</view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn" @click="submitFeedback">提交</view>
  </view>
</template>

<script>
import setting from '../../setting';
export default {
  data() {
    return {
      showCommonProblems: false,
      selectedProblems: [],
      commonProblems: [
        '无法退出',
        '卡顿',
        '闪退',
        '无法登录',
        '页面加载慢',
        '功能异常',
        '其他',
      ],
      customProblemText: '',
      images: [],
      contactInfo: '',
      phoneError: ''
    };
  },
  computed: {
    feedbackText() {
      let text = '';
      if (this.selectedProblems.length > 0) {
        text = '问题类型：' + this.selectedProblems.join('、') + '\n';
      }
      if (this.customProblemText) {
        text += '问题描述：' + this.customProblemText;
      }
      return text.trim();
    }
  },
  methods: {
    toggleCommonProblems() {
      this.showCommonProblems = !this.showCommonProblems;
    },
    isProblemSelected(problem) {
      return this.selectedProblems.includes(problem);
    },
    toggleProblem(problem) {
      if (this.isProblemSelected(problem)) {
        this.selectedProblems = this.selectedProblems.filter(p => p !== problem);
      } else {
        this.selectedProblems.push(problem);
      }
    },
    removeProblem(index) {
      this.selectedProblems.splice(index, 1);
    },
    chooseImage() {
      uni.chooseImage({
        count: 3,
        success: (res) => {
          const newImages = res.tempFilePaths;
          if (this.images.length + newImages.length > 3) {
            uni.showToast({
              title: '最多上传3张图片',
              icon: 'none'
            });
            const remainingSlots = 3 - this.images.length;
            if (remainingSlots > 0) {
              this.images = this.images.concat(newImages.slice(0, remainingSlots));
            }
          } else {
            this.images = this.images.concat(newImages);
          }
        },
      });
    },
    removeImage(index) {
      this.images.splice(index, 1);
    },
    validatePhone() {
      if (!this.contactInfo) {
        this.phoneError = '';
        return true;
      }
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(this.contactInfo)) {
        this.phoneError = '请输入正确的手机号码';
        return false;
      }
      this.phoneError = '';
      return true;
    },
    submitFeedback() {
      if (this.contactInfo && !this.validatePhone()) {
        return;
      }
      if (this.selectedProblems.length === 0 && !this.customProblemText) {
        uni.showToast({
          title: '请选择问题类型或输入问题描述',
          icon: 'none',
        });
        return;
      }
      
      const feedbackData = {
        feedbackText: this.feedbackText,
        images: this.images,
        contactInfo: this.contactInfo,
      };
      
      uni.showLoading({ title: '提交中...' });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({ title: '提交成功', icon: 'success' });
        this.selectedProblems = [];
        this.customProblemText = '';
        this.images = [];
        this.contactInfo = '';
        this.phoneError = '';
      }, 1500);
    },
  },
};
</script>

<style scoped>
page {
  background-color: #FFFEF0;
}

.feedback-page {
  padding: 20px;
}

.section {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.section-header {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
}

.hint-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 2px 6px;
}

.hint-text {
  font-size: 12px;
  color: #999;
}

.selected-problems {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.problem-tag {
  display: flex;
  align-items: center;
  background: #f0f0f0;
  border-radius: 15px;
  padding: 4px 10px;
  font-size: 12px;
}

.close-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin-left: 4px;
}

.common-problems {
  margin-top: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.problem-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.problem-item.selected {
  background-color: #f5f5f5;
}

.problem-item:last-child {
  border-bottom: none;
}

.custom-problem {
  margin-top: 15px;
}

.input-textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

/* 优化后的图片上传样式 */
.image-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
}

.uploaded-image {
  width: 100%;
  height: 100%;
}

.delete-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.delete-btn:active {
  background-color: rgba(0, 0, 0, 0.7);
}

.upload-btn {
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ddd;
  border-radius: 4px;
  color: #999;
  font-size: 12px;
}

.input-text {
  width: 100%;
  height: 40px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.error-message {
  color: #ff0000;
  font-size: 12px;
  margin-top: 5px;
}

.submit-btn {
  margin-top: 20px;
  background-color: #FFF200;
  color: black;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  border: 1rpx solid black;
}

.submit-btn:active {
  opacity: 0.8;
}
</style>